<template>
	<div class="empbox">
		<el-row>
			<el-tabs type="border-card">
				<el-tab-pane label="所有员工">
					<el-table :data="emps.slice((currentPage-1)*pagesize,currentPage*pagesize).filter(data => !search || data.ename.toLowerCase().includes(search.toLowerCase()))">
						
						<el-table-column prop="eid" label="id"></el-table-column>
						<el-table-column prop="ename" label="姓名"></el-table-column>
						<el-table-column prop="sex" label="性别">
							<template slot-scope="scope">
								<i v-if="scope.row.sex==0">男</i>
								<i v-else-if="scope.row.sex==1">女</i>
							</template>
						</el-table-column>
						<el-table-column prop="rnames" label="权限">
							<template slot-scope="scope">
								<i v-if="scope.row.rnames.length==0">无</i>
								<i v-else>
									<a v-for="r in scope.row.rnames">{{r}}&nbsp;</a>
								</i>
							</template>
						</el-table-column>
						<el-table-column prop="tel" label="电话"></el-table-column>
						<el-table-column prop="adss" label="家庭地址"></el-table-column>
						<el-table-column prop="birth" label="出生日期"></el-table-column>
						<el-table-column prop="salary" label="工资"></el-table-column>
						<el-table-column prop="induct_date" label="入职日期"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="s">
					<!-- 利用作用域插槽，将当前行作为参数传给了方法del -->
					<!-- s.$index可以获取当前行数据的索引 -->
								<el-button type="success" @click="edit(s.$index,s.row)">修改</el-button>
							</template>
						</el-table-column>
						<el-table-column>
							<template slot="header" slot-scope="scope">
								<el-input
									v-model="search"
									size="mini"
									placeholder="输入关键字" style="width:120px;"/><br/>
							</template>
						</el-table-column>
					</el-table><br/><br/>
					<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							background
							:current-page="currentPage"
							:page-sizes="[6, 8, 10]" 
							:page-size="pagesize"         
							layout="total, sizes, prev, pager, next, jumper"
							:total="emps.length">  
					</el-pagination>
					<el-dialog title="修改员工信息" :visible.sync="dialogFormVisible">
						<el-form :model="form" label-width="100px" label="新增权限" :rules="rules">
							<el-form-item label="姓名:">
								<el-input v-model="form.ename" autocoplete="off" disabled></el-input>
							</el-form-item>
							<el-form-item label="电话:" prop="tel">
								<el-input v-model="form.tel" autocoplete="off"></el-input>
							</el-form-item>
							<el-form-item label="工资:" prop="salary">
								<el-input v-model="form.salary" autocoplete="off"></el-input>
							</el-form-item>
							<el-form-item label="家庭地址:">
								<el-cascader 
									style="float:left"
								  size="large"
								  :options="options"
								  v-model="selectedOptions"
								  @change="handleChange">
								</el-cascader>
							</el-form-item>
						<el-form-item>
							<el-input v-model="form.adss" autocoplete="off" type="hidden"></el-input>
							<el-input v-model="form.sex" autocoplete="off" type="hidden"></el-input>
							<el-input v-model="form.job" autocoplete="off" type="hidden"></el-input>
							<el-input v-model="form.deptno" autocoplete="off" type="hidden"></el-input>
							<el-input v-model="form.induct_date" autocoplete="off" type="hidden"></el-input>
							<el-input v-model="form.birth" autocoplete="off" type="hidden"></el-input>
							<el-input v-model="form.dname" autocoplete="off" type="hidden"></el-input>
						</el-form-item> 
							<el-button type="primary" v-show="isedit" @click="sureUpdate">确 定</el-button>
						</el-form>
					</el-dialog>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-row>
	</div>
</template>

<script>
	import { regionDataPlus,CodeToText,TextToCode } from 'element-china-area-data'

	export default {
		inject:['reload'],
		name:'queryrole',
				data() {
					return {
						me:this.$parent.$parent.$parent.$parent.emp,
						currentPage:1, //初始页
						pagesize:6,    //    每页的数据
						isedit:false,
						rules:{
							/* 验证的对象 */
							tel:[
								/* 必须验证   message提示  trigger验证触发事件*/
								{ required: true, message: '请输入手机号', trigger: 'blur'},
								{ pattern: /^1(3|4|5|6|7|8)\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'},
							],
							salary:[
								{ required: true, message: '请输入工资', trigger: 'blur'},
								{ pattern: /^(1|2|3|4|5|6|7|8|9)\d{3,4}$/, message: '请输入正确数字范围', trigger: 'blur'},
							]
						},
						emps:[],
						search: '',
						dialogFormVisible:false,
						form:{
									eid:'',
									ename:'',
									sex:'',
									tel:'',
									birth:'',
									deptno:'',
									job:'',
									adss:[],
									induct_date:'',
									dname:'',
									salary:'',
							
							},
						isedit:false,
						myindex:-1,
						options: regionDataPlus,
						selectedOptions: [],
						selectedzn:[],
					}
				},
				created(){
					this.$axios.post("swempbydt?deptno="+this.me.deptno+"").then(v=>{
						console.log(v)
						if(v.data){
							this.emps=v.data;
						}else{
							alert("出错了！！");
						}
					}).catch(ex=>{
						alert("出错了！"+ex);
					})
				},
				methods:{
					edit(index,row){
						this.isedit=true;
						this.dialogFormVisible=true;
						this.form={
							eid:row.eid,
							ename:row.ename,
							sex:row.sex,
							tel:row.tel,
							adss:this.selectedzn,
							birth:row.birth,
							job:row.job,
							deptno:row.deptno,
							salary:row.salary,
							induct_date:row.induct_date,
							dname:row.dname,
						};
						
						var location=row.adss.split(',');
						for(var i = 0; i < location.length; i++){
							//alert(TextToCode[location[0]].code);
							if(i==0){
									this.selectedOptions.push(TextToCode[location[i]].code);
								}else if(i==1){
									this.selectedOptions.push(TextToCode[location[i-1]][location[i]].code);
								}else if(i==2){
									this.selectedOptions.push(TextToCode[location[i-2]][location[i-1]][location[i]].code);
								} 
							}
						this.myindex=index;
					},
					sureUpdate:function(){
						//根据form.id确认要修改的webs的id值
						var y=this.selectedOptions;
						for(var i = 0; i < y.length; i++){
							this.selectedzn.push(CodeToText[y[i]]);
							/* if(i==y.length-1){
								this.selectedzn=this.selectedzn.concat(CodeToText[y[i]]);
								break;
							}
							this.selectedzn=this.selectedzn.concat(CodeToText[y[i]],','); */
						}
						this.$axios.post("changeTelandsal",this.form).then(v=>{
							console.log(v)
							if(v.data){
								this.$message.success("修改成功！");
								this.reload();
							}else{
								this.$message.error("出错了！")
							}
						}).catch(ex=>{
							this.$message.error("出错了！"+ex)
						})
						this.emps.splice(this.myindex,1,this.form);
						//确认修改
						this.dialogFormVisible=false;
						this.selectedOptions=[],
						this.selectedzn=[],
						this.isedit=false;//修改状态结束
					},
					handleChange (value) {
						//alert(CodeToText['110000']);
						//alert(TextToCode['石峰区'].code);
						console.log(value)
					},
					handleSizeChange: function (size) {
						this.pagesize = size;
						console.log(this.pagesize)  //每页下拉显示数据
					},
					handleCurrentChange: function(currentPage){
							this.currentPage = currentPage;
							console.log(this.currentPage)  //点击第几页
					},
				}
			}
		</script>
		
<style>

</style>
		
